<template>
	<div>
		<div class="searchHeader">
			<el-input v-model="keyWords" placeholder="请输入搜索关键字..." class="articleSearchText" size="mini"></el-input>
			<el-button size="mini" type="primary" icon="el-icon-search">
				搜索文章
			</el-button>
		</div>
		<div>
			<el-tabs v-model="activeName" type="card">
				<el-tab-pane label="全部文章" name="all">
					<ArticleInfos :edit="false" :del="false" :recover="false"></ArticleInfos>
				</el-tab-pane>
				<el-tab-pane label="已发布" name="published">
					<ArticleInfos :edit="true" :del="true" :recover="false"></ArticleInfos>
				</el-tab-pane>
				<el-tab-pane label="草稿箱" name="drafts">
					<ArticleInfos :edit="true" :del="true" :recover="false"></ArticleInfos>
				</el-tab-pane>
				<el-tab-pane label="回收站" name="recycle">
					<ArticleInfos :edit="false" :del="true" :recover="true"></ArticleInfos>
				</el-tab-pane>
				<el-tab-pane label="我的" name="mine">
					<ArticleInfos :edit="true" :del="true" :recover="false"></ArticleInfos>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script>
	import ArticleInfos from '../../components/aricle/ArticleInfos.vue'

	export default {
		name: "ListArticle",
		data: function() {
			return {
				keyWords: '',
				activeName: 'all'
			}
		},
		components: {
			ArticleInfos
		}
	}
</script>

<style>
	.searchHeader .articleSearchText {
		width: 300px;
		margin-bottom: 10px;
	}
</style>
